$(function () {
    // 分类的划入变色事件
    let $classification = $(".classification div")
    // console.log($classification)
    $classification.on("mouseover", function () {
        this.style.color = "#EE1055"
    })
    $classification.on("mouseout", function () {
        this.style.color = ""
    })
    //搜索框 边框变色
    $(".int").on("focus",function(){
        this.style.borderColor="#EE1055"
    })
    $(".int").on("blur",function(){
        this.style.borderColor=""
    })
    // console.log($(".int"))
    // 二级菜单切换城市名称
    var $positioning_sp1 = document.querySelector(".positioning-sp")
    let $hot_city_list = document.querySelectorAll(".hot-city-list span")
    let $hot_city_list2 = document.querySelectorAll(".hot-city-list2 span")
    for (let i = 0; i < $hot_city_list.length; i++) {
        $hot_city_list[i].onclick = function () {
            $positioning_sp1.innerHTML = this.innerHTML
        }
    }
    for (let i = 0; i < $hot_city_list2.length; i++) {
        $hot_city_list2[i].onclick = function () {
            $positioning_sp1.innerHTML = this.innerHTML
        }
    }
    // 演唱会请求的数据  渲染页面
    let $bcx_rt = document.querySelectorAll(".bcx1-rt")
    $(document).ready(function () {
        $.ajax({
            url: "http://127.0.0.1:8080/static/data/vocal_concert.json"
        })
            .done(function (data) {
                render(data)
            })
    });
    $(".bcx1-img").lazyload()
    $(".bcx2-img").lazyload()
    function render(data) {
        for (var i = 0; i < $bcx_rt.length; i++) {
            $bcx_rt[i].innerHTML = data.concert.map(
                item => `  
                        <div class="bcx2">
                            <img src="${item.itemimg}" alt="" class="bcx2-img">
                            <div class="bcx2-rt">
                                <div class="title2">${item.title2}
                                    <p class="p1">${item.p1}</p></div>
                                <div class="venue">${item.venue}</div>
                                <div class="showtime">${item.showtime}</div>
                                <div class="showtime"></div> 
                                <div class="price">￥${item.price}
                                    <span>起</span>
                                </div>       
                            </div>
                        </div>
            `).join("")
        }
    }
    // 楼梯效果
    let top_list=[];
    let $content=$(".content")
    $.each($content,function(index,ele){
        top_list.push($(ele).offset().top)
    })
    //  console.log(top_list)
    $(".stairs .li2").click(function(){
        changeClass.call( this )
        var index=$(this).index(".stairs .li2")
        changeScrollTop( index );
    })
    $(".stairs li").first().click(function(){
        $(this).addClass("active").siblings().removeClass("active")
    })
    function changeClass(){
        $(this).addClass("active").siblings().removeClass("active")
    }
    $(".stairs .li2").last().click(function(){
        $("html,body").stop(true).animate({
            scrollTop:0
      },2000)
    })
    function changeScrollTop( index ){
        // 切换页面的scrollTop;
        $("html,body")
        .stop( true )
        .animate({
              scrollTop : top_list[index]
        })
    }
    // 根据滚动的scrollTop 获取当前楼层下标;
    $(window).scroll(function(){
        var index=getIndex()
         changeBtnClass( index );
        //  console.log(index)
    })
    //节流 这里有问题    
//     var index=getIndex()
//     console.log(index)
//     window.onscroll = (function(){
//         console.log("hello") 
//     console.log(index)
//         // console.log(changeBtnClass());
//         var t = null;
//         return  function(){
//               if(typeof t === "number"){
//                     return false;
//               }
//               t = setTimeout( function(){
//                     t = null;
//                     console.log( "hello 闭包");
//                      changeBtnClass( index )
//                      console.log(index)
//               } , 100)
//         }
//   })();
    function getIndex(){
        var scrollTop=$("html,body").scrollTop()
        if(scrollTop>=top_list[top_list.length-1]){
            return top_list.length-1
        }
        for(let i=0;i<top_list.length;i++){
            if(scrollTop>=top_list[i]&&scrollTop<top_list[i+1]){
                return i
            }
        }   
    }
     function changeBtnClass( index ){
        $(".stairs .li2")
        .removeClass("active")
        .eq(index)
        .addClass("active")
     }
    //  点击切换登录
    function initNav(){
        let userid = getCookie("userid");
        let token  = getCookie("token");
        if (userid && token) {
              loadUserMsg(userid, token);
        }
  } 
    function loadUserMsg(id,token){
        // function(userid,token){
            let url = "http://127.0.0.1:8888/users/info/" + id;
    
          let options = {
                type: "GET",
                // 把token放入到请求头之中，让后端可以验证我们的登录信息; 
                headers: {
                      authorization: token
                },
                dataType : "json"
          };
          $.ajax(url, options)
          .done(function(res){
              console.log(res)
            renderUserMsg(res)
          })
    }
    initNav()
    var sign=document.querySelector(".sp9")
    function renderUserMsg(res){
        sign.innerHTML=`欢迎:${res.info.username}`
        console.log(res.info.nickname)
        console.log(sign)
    }    
})